<template>
  <el-form-item label="公司" name="compShort">
    <el-select v-model="company" show-search placeholder="请选择" style="width: 100%" filterable remote
      :remote-method="remoteMethod" @change="onChange" :disabled="disabled">
      <el-option v-for="item in compList" :key="item.companyShort" :label="item.companyShort"
        :value="item.companyShort">
      </el-option>
    </el-select>
    <!-- <el-input v-model="formData.compShort" /> -->
  </el-form-item>

</template>
<script>
import { queryCompanyList } from '@/service/company/index';

export default {
  props: ['compShort', 'disabled'],
  data() {
    return {
      company: '',
      compList: [],
    };
  },
  watch: {
    compShort(newVal, oldVal) {
      this.company = newVal;
    },
  },
  mounted() {
    this.company = this.compShort;
    this.remoteMethod();
  },
  methods: {
    async remoteMethod(query) {
      const res = await queryCompanyList({ companyShort: query });
      this.compList = res.dataList;
    },
    onChange(val) {
      this.$emit('update:compShort', val);
    },
  },
};
</script>

<style>
</style>